<template>
  <el-form label-width="100px">
    <CommonProps />
    <el-form-item label="显示类型">
      <el-select v-model="fs.getProps().type">
        <el-option label="日" value="date"></el-option>
        <el-option label="周" value="week"></el-option>
        <el-option label="月" value="month"></el-option>
        <el-option label="年" value="year"></el-option>
        <el-option label="日期时间" value="datetime"></el-option>
        <el-option label="多个日期" value="dates"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="label">
      <el-date-picker v-model="fs.getProps().defaultVal" :type="fs.getProps().type" :value-format="valueFormat" />
    </el-form-item>
    <CommonPropsTwo />
  </el-form>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import CommonProps from '../../common-props/Props.vue'
import CommonPropsTwo from '../../common-props/PropsTwo.vue'
import { ElForm, ElFormItem, ElDatePicker, ElSelect, ElOption } from 'element-plus'
import { useFlowStore } from '@/stores/flow'
import { dateFormatType } from '../../supports/utils'

const fs = useFlowStore()
const label = computed(() => {
  const type = fs.getProps().type
  if (type == 'date') {
    return '默认日期'
  } else if (type == 'week') {
    return '默认周'
  } else if (type == 'month') {
    return '默认月'
  } else if (type == 'year') {
    return '默认年'
  } else if (type == 'datetime') {
    return '默认时间'
  } else if (type == 'dates') {
    return '默认日期'
  } else {
    return '默认'
  }
})

const valueFormat = computed(() => dateFormatType(fs.getProps().type))
</script>

<style lang="scss" scoped></style>
